import React, { Component } from 'react';
import TheTable from "@/components/TheTable";
import ThePagination from "../../../components/ThePagination";
import TheButton from "@/components/TheButton";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend';
// import {  } from '@/request/'
import TheImage from '@/components/TheImage'
import store from "@/store/store"
import _ from 'lodash';

import { Space, Modal, Input, Radio } from "antd";

const { TextArea } = Input;

class Index extends Component {
    state = {
        columns: [
            {
                title: "创建时间",
                dataIndex: "time",
                key: "time",
            },
            {
                title: "店铺ID",
                dataIndex: "id",
                key: "id",
            },
            {
                title: "店铺编号",
                dataIndex: "no",
                key: "no",
            },
            {
                title: "商家信息",
                dataIndex: "info",
                key: "info",
                render: (text, render) => {
                    if (text) {
                        return <>
                            <div>123</div>
                            <div>123</div>
                        </>
                    }
                }
            },
            {
                title: "店铺LOGO/店铺名称",
                dataIndex: "logo",
                key: "logo",
                render: (text, render) => {
                    if (text) {
                        return <div style={{ display: "flex", justifyContent: "space-around", alignItems: "center" }}>
                            <TheImage src={text} width={80} height={80} /> / <span>123</span>
                        </div>
                    }
                }
            },
            {
                title: "地区",
                dataIndex: "area",
                key: "area",
            },
            {
                title: "详情地址",
                dataIndex: "address",
                key: "address",
                render: (text, record) => {
                    return <div style={{
                        width: 200,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis'
                    }}>{text}</div>
                }
            },
            {
                title: "经营类目",
                dataIndex: "duration",
                key: "duration",
            },
            {
                title: "店铺类型",
                dataIndex: "duration",
                key: "duration",
            },
            {
                title: "服务标签",
                dataIndex: "duration",
                key: "duration",
            },
            {
                title: "审核状态",
                dataIndex: "sstatus",
                key: "sstatus",
                render: (text, render) => {
                    let label = ''
                    switch (text) {
                        case 0:
                            label = "审核中"
                            break;
                        case 1:
                            label = "审核已通过"
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },
            {
                title: "经营状态",
                dataIndex: "jjstatus",
                key: "jjstatus",
                render: (text, render) => {
                    let label = ''
                    switch (text) {
                        case 0:
                            label = "开业"
                            break;
                        case 1:
                            label = "打烊"
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },
            {
                title: "入住方式",
                dataIndex: "ff",
                key: "ff",
            },
            {
                title: "备注",
                dataIndex: "mm",
                key: "mm",
            },
            {
                title: "操作",
                fixed: "right",
                width: 200,
                render: (text, render) => {
                    return (
                        <div>
                            <TheButton onClick={() => this.goEdit()}>查看</TheButton>
                            <TheButton onClick={() => this.goEdit()}>编辑</TheButton>
                        </div>
                    );
                },
            },
        ],
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        newColumns: [],
        form_show: true,
        searchOption: [
            {
                field: 'search',
                label: '店铺搜索',
                placeholder: '请输入搜索关键字',
                required: false,
                rules: [],
                type: 'InputGroupSSelect',
                options: [
                    { value: "0", label: '店铺ID' },
                    { value: "1", label: '店铺编号' },
                    { value: "2", label: '店铺名称' }
                ],
                initialValues: {
                    Select: "0"
                },
            },
            {
                field: 'type',
                label: '店铺类型',
                placeholder: '请选择',
                required: false,
                rules: [],
                type: 'InputGroupDSelect',
                options: [
                    [
                        { value: "0", label: '门店' },
                    ],
                    [
                        { value: "0", label: '自营' },
                        { value: "1", label: '加盟' },
                        { value: "2", label: '代理' },
                        { value: "3", label: '代销' },
                        { value: "4", label: '第三方' },
                    ]
                ],
            },
            { field: 'time', label: '创建时间', placeholder: '请选择', required: false, rules: [], type: 'RangePicker' },
            // {
            //     field: 'status',
            //     label: '经营状态',
            //     placeholder: '请选择',
            //     required: false,
            //     rules: [],
            //     type: 'Select',
            //     options: [{value: 0, label: '全部'}, {value: 1, label: '开业'}, {value: 2, label: '打烊'}],
            //     initialValues: 0
            // },
        ],
        queryForm: {},
    };

    componentDidMount() {
        this.setState({
            dataSource: [
                {
                    time: "2023-02-09",
                    info: "sd",
                    logo: 's',
                    address: 'dddsdasdadddddsdasdadddddsdasdadddddsdasdadddddsdasdadddddsdasdadddddsdasdadd'
                }
            ]
        })
    }

    // 获取表格数据
    getData = async (values) => {
        console.log(values)
    }

    // 新增
    goAdd = () => {
        this.props.history.push(`/shopManagement/list/add`);
    };

    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };

    onReset() {
        this.setState({
            queryForm: {}
        }, () => {
            this.pageChange(1, 10)
        })
    }

    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }

    onFormSearch(values) {
        this.setState({
            pageData: { pageNo: 1, pageSize: 10 }
        }, () => {
            this.getData(values)
        })
    }

    render() {
        const {
            columns,
            dataSource,
            pageData: { pageNo, pageSize },
            total,
            searchOption,
            form_show,
            newColumns,
        } = this.state;
        return (
            <div className={"p-layout-box commodity-content"}>
                <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                    onGetValues={(values) => this.onFormSearch(values)}
                    onReset={(values) => this.onReset(values)}
                >
                </TheQueryForm>
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                    onTableRefresh={() => this.getData()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >
                    <TheButton type="primary" size="middle" onClick={this.goAdd}>
                        新增
                    </TheButton>
                    <TheButton type="default" size="middle">
                        导出
                    </TheButton>
                </TheTableExtend>
                <Space direction="vertical" size="middle">
                    {/*<Radio.Group value={""} onChange={this.handleStatusChange}>*/}
                    {/*    <Radio.Button value="">全部</Radio.Button>*/}
                    {/*    <Radio.Button value="0">未完成</Radio.Button>*/}
                    {/*    <Radio.Button value="1">已完成</Radio.Button>*/}
                    {/*</Radio.Group>*/}
                    <TheTable
                        columns={newColumns}
                        dataSource={dataSource}
                        rowKey={'configCarouselId'}
                    />
                </Space>
                <ThePagination
                    pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
            </div>
        );
    }
}

export default Index;
